<template>
  <div class="convert-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">文档转换</h1>
          <p class="page-subtitle">将 Markdown 文档转换为多种格式</p>
        </div>
        
        <div class="header-stats">
          <div class="stat-item">
            <div class="stat-value">{{ stats.totalConverted || 0 }}</div>
            <div class="stat-label">总转换数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.todayConverted || 0 }}</div>
            <div class="stat-label">今日转换</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ stats.activeJobs || 0 }}</div>
            <div class="stat-label">进行中</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 转换内容 -->
    <div class="convert-content">
      <div class="convert-container">
        <!-- 左侧：文件上传和设置 -->
        <div class="convert-left">
          <!-- 文件上传区域 -->
          <div class="upload-section">
            <div class="section-header">
              <h2 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7,10 12,15 17,10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                选择文件
              </h2>
              <p class="section-desc">支持 .md、.markdown 格式文件</p>
            </div>
            
            <FileUpload 
              @file-selected="handleFileSelected"
              @upload-progress="handleUploadProgress"
              @upload-complete="handleUploadComplete"
              @upload-error="handleUploadError"
            />
          </div>
          
          <!-- 转换设置 -->
          <div class="settings-section">
            <div class="section-header">
              <h2 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="3"/>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                </svg>
                转换设置
              </h2>
              <p class="section-desc">配置输出格式和选项</p>
            </div>
            
            <div class="settings-form">
              <!-- 输出格式选择 -->
              <div class="form-group">
                <label class="form-label">输出格式</label>
                <div class="format-options">
                  <button 
                    v-for="format in outputFormats"
                    :key="format.value"
                    class="format-btn"
                    :class="{ active: convertSettings.outputFormat === format.value }"
                    @click="convertSettings.outputFormat = format.value"
                  >
                    <component :is="format.icon" class="format-icon" />
                    <span class="format-name">{{ format.name }}</span>
                    <span class="format-desc">{{ format.description }}</span>
                  </button>
                </div>
              </div>
              
              <!-- PDF 特定设置 -->
              <div v-if="convertSettings.outputFormat === 'pdf'" class="form-group">
                <label class="form-label">PDF 设置</label>
                <div class="pdf-settings">
                  <div class="setting-row">
                    <label class="setting-label">页面大小</label>
                    <select v-model="convertSettings.pdfOptions.pageSize" class="setting-select">
                      <option value="A4">A4</option>
                      <option value="A3">A3</option>
                      <option value="Letter">Letter</option>
                      <option value="Legal">Legal</option>
                    </select>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">页面方向</label>
                    <select v-model="convertSettings.pdfOptions.orientation" class="setting-select">
                      <option value="portrait">纵向</option>
                      <option value="landscape">横向</option>
                    </select>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">页边距</label>
                    <select v-model="convertSettings.pdfOptions.margin" class="setting-select">
                      <option value="normal">标准</option>
                      <option value="narrow">窄边距</option>
                      <option value="wide">宽边距</option>
                    </select>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">包含目录</label>
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="convertSettings.pdfOptions.includeTableOfContents"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- Word 特定设置 -->
              <div v-if="convertSettings.outputFormat === 'docx'" class="form-group">
                <label class="form-label">Word 设置</label>
                <div class="docx-settings">
                  <div class="setting-row">
                    <label class="setting-label">样式模板</label>
                    <select v-model="convertSettings.docxOptions.template" class="setting-select">
                      <option value="default">默认样式</option>
                      <option value="academic">学术论文</option>
                      <option value="business">商务报告</option>
                      <option value="simple">简洁风格</option>
                    </select>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">包含目录</label>
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="convertSettings.docxOptions.includeTableOfContents"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- HTML 特定设置 -->
              <div v-if="convertSettings.outputFormat === 'html'" class="form-group">
                <label class="form-label">HTML 设置</label>
                <div class="html-settings">
                  <div class="setting-row">
                    <label class="setting-label">CSS 主题</label>
                    <select v-model="convertSettings.htmlOptions.theme" class="setting-select">
                      <option value="github">GitHub 风格</option>
                      <option value="minimal">极简风格</option>
                      <option value="academic">学术风格</option>
                      <option value="dark">深色主题</option>
                    </select>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">包含 CSS</label>
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="convertSettings.htmlOptions.includeCSS"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">代码高亮</label>
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="convertSettings.htmlOptions.syntaxHighlight"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 通用设置 -->
              <div class="form-group">
                <label class="form-label">通用选项</label>
                <div class="general-settings">
                  <div class="setting-row">
                    <label class="setting-label">文件名前缀</label>
                    <input 
                      type="text"
                      v-model="convertSettings.filenamePrefix"
                      class="setting-input"
                      placeholder="可选的文件名前缀"
                    />
                  </div>
                  
                  <div class="setting-row">
                    <label class="setting-label">转换完成后自动下载</label>
                    <label class="toggle-switch">
                      <input 
                        type="checkbox"
                        v-model="convertSettings.autoDownload"
                      />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                </div>
              </div>
              
              <!-- 开始转换按钮 -->
              <div class="convert-actions">
                <button 
                  class="btn btn-primary btn-large"
                  @click="startConversion"
                  :disabled="!selectedFile || converting"
                >
                  <svg v-if="converting" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
                    <path d="M21 12a9 9 0 11-6.219-8.56"/>
                  </svg>
                  <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="16,16 12,12 8,16"/>
                    <line x1="12" y1="12" x2="12" y2="21"/>
                  </svg>
                  {{ converting ? '转换中...' : '开始转换' }}
                </button>
                
                <button 
                  v-if="selectedFile"
                  class="btn btn-secondary"
                  @click="clearFile"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                  </svg>
                  清除文件
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧：预览和任务状态 -->
        <div class="convert-right">
          <!-- 文件预览 -->
          <div v-if="selectedFile" class="preview-section">
            <div class="section-header">
              <h2 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                  <circle cx="12" cy="12" r="3"/>
                </svg>
                文件预览
              </h2>
              <div class="file-info">
                <span class="file-name">{{ selectedFile.name }}</span>
                <span class="file-size">{{ formatFileSize(selectedFile.size) }}</span>
              </div>
            </div>
            
            <div class="preview-content">
              <div v-if="fileContent" class="markdown-preview">
                <div class="preview-toolbar">
                  <button 
                    class="preview-tab"
                    :class="{ active: previewMode === 'source' }"
                    @click="previewMode = 'source'"
                  >
                    源码
                  </button>
                  <button 
                    class="preview-tab"
                    :class="{ active: previewMode === 'rendered' }"
                    @click="previewMode = 'rendered'"
                  >
                    预览
                  </button>
                </div>
                
                <div class="preview-body">
                  <pre v-if="previewMode === 'source'" class="source-view">{{ fileContent }}</pre>
                  <div v-else class="rendered-view" v-html="renderedContent"></div>
                </div>
              </div>
              
              <div v-else class="preview-loading">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
                  <path d="M21 12a9 9 0 11-6.219-8.56"/>
                </svg>
                <span>加载文件内容...</span>
              </div>
            </div>
          </div>
          
          <!-- 转换进度 -->
          <div v-if="converting || currentTask" class="progress-section">
            <div class="section-header">
              <h2 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"/>
                  <polyline points="12,6 12,12 16,14"/>
                </svg>
                转换进度
              </h2>
            </div>
            
            <div class="progress-content">
              <ProgressIndicator 
                v-if="currentTask"
                :progress="currentTask.progress"
                :status="currentTask.status"
                :type="'linear'"
                :show-percentage="true"
              />
              
              <div class="progress-details">
                <div class="progress-step">
                  <span class="step-label">当前步骤：</span>
                  <span class="step-value">{{ currentTask?.currentStep || '准备中...' }}</span>
                </div>
                <div class="progress-time">
                  <span class="time-label">预计剩余：</span>
                  <span class="time-value">{{ currentTask?.estimatedTime || '--' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 最近任务 -->
          <div class="recent-tasks-section">
            <div class="section-header">
              <h2 class="section-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M3 3h18v18H3zM9 9h6v6H9z"/>
                </svg>
                最近任务
              </h2>
              <router-link to="/history" class="view-all-link">
                查看全部
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="9,18 15,12 9,6"/>
                </svg>
              </router-link>
            </div>
            
            <div class="recent-tasks-list">
              <div 
                v-for="task in recentTasks"
                :key="task.id"
                class="task-item"
              >
                <div class="task-icon">
                  <component :is="getTaskIcon(task.status)" class="icon" />
                </div>
                <div class="task-info">
                  <div class="task-name">{{ task.filename }}</div>
                  <div class="task-meta">
                    <span class="task-format">{{ task.outputFormat.toUpperCase() }}</span>
                    <span class="task-time">{{ formatTime(task.createdAt) }}</span>
                  </div>
                </div>
                <div class="task-actions">
                  <button 
                    v-if="task.status === 'completed'"
                    class="action-btn download-btn"
                    @click="downloadTask(task)"
                    title="下载"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                      <polyline points="7,10 12,15 17,10"/>
                      <line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                  </button>
                  <button 
                    v-if="task.status === 'failed'"
                    class="action-btn retry-btn"
                    @click="retryTask(task)"
                    title="重试"
                  >
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <polyline points="1,4 1,10 7,10"/>
                      <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                    </svg>
                  </button>
                </div>
              </div>
              
              <div v-if="recentTasks.length === 0" class="empty-tasks">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <polyline points="14,2 14,8 20,8"/>
                </svg>
                <p>暂无转换任务</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useTaskStore } from '@/stores/task'
import { useSettingsStore } from '@/stores/settings'
import FileUpload from '@/components/FileUpload.vue'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
import { marked } from 'marked'

// Stores
const taskStore = useTaskStore()
const settingsStore = useSettingsStore()

// 响应式数据
const selectedFile = ref<File | null>(null)
const fileContent = ref('')
const converting = ref(false)
const previewMode = ref<'source' | 'rendered'>('rendered')
const currentTask = ref<any>(null)

// 转换设置
const convertSettings = ref({
  outputFormat: 'pdf',
  filenamePrefix: '',
  autoDownload: true,
  pdfOptions: {
    pageSize: 'A4',
    orientation: 'portrait',
    margin: 'normal',
    includeTableOfContents: true
  },
  docxOptions: {
    template: 'default',
    includeTableOfContents: true
  },
  htmlOptions: {
    theme: 'github',
    includeCSS: true,
    syntaxHighlight: true
  }
})

// 输出格式选项
const outputFormats = [
  {
    value: 'pdf',
    name: 'PDF',
    description: '便携式文档格式',
    icon: { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>' }
  },
  {
    value: 'docx',
    name: 'Word',
    description: 'Microsoft Word 文档',
    icon: { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>' }
  },
  {
    value: 'html',
    name: 'HTML',
    description: '网页格式',
    icon: { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16,18 22,12 16,6"/><polyline points="8,6 2,12 8,18"/></svg>' }
  },
  {
    value: 'epub',
    name: 'EPUB',
    description: '电子书格式',
    icon: { template: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>' }
  }
]

// 计算属性
const stats = computed(() => taskStore.stats)
const recentTasks = computed(() => taskStore.recentTasks.slice(0, 5))

const renderedContent = computed(() => {
  if (!fileContent.value) return ''
  try {
    return marked(fileContent.value)
  } catch (error) {
    console.error('Failed to render markdown:', error)
    return '<p>预览失败</p>'
  }
})

// 方法
const handleFileSelected = (file: File) => {
  selectedFile.value = file
  loadFileContent(file)
}

const handleUploadProgress = (progress: number) => {
  // 处理上传进度
}

const handleUploadComplete = (response: any) => {
  // 处理上传完成
}

const handleUploadError = (error: any) => {
  console.error('Upload error:', error)
}

const loadFileContent = async (file: File) => {
  try {
    const text = await file.text()
    fileContent.value = text
  } catch (error) {
    console.error('Failed to load file content:', error)
    fileContent.value = '无法加载文件内容'
  }
}

const startConversion = async () => {
  if (!selectedFile.value) return
  
  converting.value = true
  
  try {
    const taskData = {
      file: selectedFile.value,
      outputFormat: convertSettings.value.outputFormat,
      options: {
        ...convertSettings.value,
        [`${convertSettings.value.outputFormat}Options`]: 
          convertSettings.value[`${convertSettings.value.outputFormat}Options` as keyof typeof convertSettings.value]
      }
    }
    
    const task = await taskStore.createTask(taskData)
    currentTask.value = task
    
    // 模拟转换进度
    simulateConversionProgress(task)
    
  } catch (error) {
    console.error('Failed to start conversion:', error)
  } finally {
    converting.value = false
  }
}

const simulateConversionProgress = (task: any) => {
  const steps = [
    '解析 Markdown 文件...',
    '处理图片和链接...',
    '应用样式模板...',
    '生成输出文件...',
    '完成转换'
  ]
  
  let currentStep = 0
  const interval = setInterval(() => {
    if (currentStep < steps.length) {
      currentTask.value = {
        ...currentTask.value,
        currentStep: steps[currentStep],
        progress: Math.min(((currentStep + 1) / steps.length) * 100, 100),
        estimatedTime: `${Math.max(steps.length - currentStep - 1, 0)} 秒`
      }
      currentStep++
    } else {
      clearInterval(interval)
      currentTask.value = {
        ...currentTask.value,
        status: 'completed',
        progress: 100,
        currentStep: '转换完成',
        estimatedTime: '0 秒'
      }
      
      // 自动下载
      if (convertSettings.value.autoDownload) {
        setTimeout(() => {
          downloadTask(currentTask.value)
        }, 1000)
      }
    }
  }, 2000)
}

const clearFile = () => {
  selectedFile.value = null
  fileContent.value = ''
  currentTask.value = null
}

const downloadTask = (task: any) => {
  // 模拟下载
  const link = document.createElement('a')
  link.href = '#'
  link.download = `${task.filename}.${task.outputFormat}`
  link.click()
}

const retryTask = (task: any) => {
  taskStore.retryTask(task.id)
}

const getTaskIcon = (status: string) => {
  const icons = {
    pending: { template: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>' },
    processing: { template: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>' },
    completed: { template: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg>' },
    failed: { template: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>' }
  }
  return icons[status as keyof typeof icons] || icons.pending
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatTime = (timestamp: string): string => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 60000) return '刚刚'
  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
  return `${Math.floor(diff / 86400000)} 天前`
}

// 监听器
watch(() => settingsStore.settings.defaultOutputFormat, (newFormat) => {
  if (newFormat) {
    convertSettings.value.outputFormat = newFormat
  }
})

// 生命周期
onMounted(() => {
  taskStore.loadTasks()
  taskStore.loadStats()
  
  // 从设置中加载默认值
  if (settingsStore.settings.defaultOutputFormat) {
    convertSettings.value.outputFormat = settingsStore.settings.defaultOutputFormat
  }
  if (settingsStore.settings.autoDownload !== undefined) {
    convertSettings.value.autoDownload = settingsStore.settings.autoDownload
  }
})
</script>

<style scoped>
.convert-view {
  min-height: 100vh;
  background: #f8fafc;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 2rem 0;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.5rem 0;
}

.page-subtitle {
  color: #64748b;
  margin: 0;
}

.header-stats {
  display: flex;
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.875rem;
  color: #64748b;
}

/* 转换内容 */
.convert-content {
  flex: 1;
  padding: 2rem 0;
}

.convert-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* 左侧区域 */
.convert-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 右侧区域 */
.convert-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 通用区域样式 */
.upload-section,
.settings-section,
.preview-section,
.progress-section,
.recent-tasks-section {
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.section-header {
  padding: 1.5rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0.25rem 0 0 0;
}

/* 设置表单 */
.settings-form {
  padding: 1.5rem;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.75rem;
  display: block;
}

/* 格式选择 */
.format-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.format-btn:hover {
  border-color: #9ca3af;
}

.format-btn.active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.format-icon {
  opacity: 0.7;
}

.format-btn.active .format-icon {
  opacity: 1;
  color: #3b82f6;
}

.format-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

.format-btn.active .format-name {
  color: #3b82f6;
}

.format-desc {
  font-size: 0.75rem;
  color: #64748b;
}

/* 设置行 */
.pdf-settings,
.docx-settings,
.html-settings,
.general-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.setting-label {
  font-size: 0.875rem;
  color: #374151;
  flex: 1;
}

.setting-select,
.setting-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  min-width: 120px;
}

.setting-select:focus,
.setting-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.2s;
  border-radius: 22px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
  transform: translateX(22px);
}

/* 转换操作 */
.convert-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* 文件预览 */
.file-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.file-size {
  font-size: 0.75rem;
  color: #64748b;
}

.preview-content {
  height: 400px;
  overflow: hidden;
}

.markdown-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-toolbar {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.preview-tab {
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: #64748b;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.preview-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.preview-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
}

.source-view {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rendered-view {
  line-height: 1.6;
}

.rendered-view h1,
.rendered-view h2,
.rendered-view h3,
.rendered-view h4,
.rendered-view h5,
.rendered-view h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.rendered-view p {
  margin-bottom: 1rem;
}

.rendered-view code {
  background: #f1f5f9;
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-size: 0.875em;
}

.rendered-view pre {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.preview-loading {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #64748b;
}

/* 进度区域 */
.progress-content {
  padding: 1.5rem;
}

.progress-details {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}

.step-label,
.time-label {
  color: #64748b;
}

.step-value,
.time-value {
  color: #374151;
  font-weight: 500;
}

/* 最近任务 */
.view-all-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.view-all-link:hover {
  color: #2563eb;
}

.recent-tasks-list {
  padding: 1.5rem;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.task-item:last-child {
  border-bottom: none;
}

.task-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}

.task-icon .icon {
  width: 16px;
  height: 16px;
}

.task-info {
  flex: 1;
}

.task-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

.task-meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.task-format {
  background: #e5e7eb;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-weight: 500;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.download-btn {
  background: #dcfce7;
  color: #16a34a;
}

.download-btn:hover {
  background: #bbf7d0;
}

.retry-btn {
  background: #fef3c7;
  color: #d97706;
}

.retry-btn:hover {
  background: #fde68a;
}

.empty-tasks {
  text-align: center;
  padding: 2rem;
  color: #64748b;
}

.empty-tasks svg {
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
}

.btn-secondary {
  background: #6b7280;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #4b5563;
}

.btn-large {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

/* 动画 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .convert-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .format-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .header-stats {
    justify-content: space-around;
  }
  
  .convert-content {
    padding: 1rem 0;
  }
  
  .convert-container {
    padding: 0 1rem;
  }
  
  .setting-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .convert-actions {
    flex-direction: column;
  }
  
  .progress-details {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .task-item {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .task-actions {
    order: -1;
    margin-left: auto;
  }
}
</style>